Service Workere: Slik bygger du «offline-first»-nettapplikasjoner

I dagens verden forventer brukere at nettapplikasjoner er raske, pålitelige og tilgjengelige, selv når nettverkstilkoblingen er begrenset eller fraværende. Det er her konseptet «offline-first»-design kommer inn i bildet. Service workere er en kraftig teknologi som gjør det mulig for utviklere å bygge nettapplikasjoner som fungerer sømløst uten nett, og gir en overlegen brukeropplevelse.

Hva er service workere?

En service worker er en JavaScript-fil som kjører i bakgrunnen, atskilt fra nettleserens hovedtråd. Den fungerer som en mellomtjener (proxy) mellom nettapplikasjonen og nettverket, og fanger opp nettverksforespørsler og håndterer mellomlagring (caching). Service workere kan håndtere oppgaver som:

• Mellomlagring av statiske ressurser (HTML, CSS, JavaScript, bilder)
• Servering av mellomlagret innhold i frakoblet modus
• Push-varsler
• Bakgrunnssynkronisering

Det er viktig å merke seg at service workere styres av nettleseren, ikke av nettsiden. Dette gjør at de kan fungere selv når brukeren har lukket fanen eller nettleservinduet.

Hvorfor «offline-first»?

Å bygge en «offline-first»-nettapplikasjon gir mange fordeler:

• Forbedret ytelse: Ved å mellomlagre statiske ressurser og servere dem direkte fra cachen, reduserer service workere lastetidene betydelig, noe som resulterer i en raskere og mer responsiv brukeropplevelse.
• Økt pålitelighet: Selv når nettverket er utilgjengelig, kan brukere fortsatt få tilgang til mellomlagret innhold, noe som sikrer at applikasjonen forblir funksjonell.
• Økt engasjement: Frakoblet funksjonalitet gjør applikasjonen mer nyttig og tilgjengelig, noe som fører til økt brukerengasjement og -lojalitet.
• Redusert dataforbruk: Ved å mellomlagre ressurser reduserer service workere mengden data som må lastes ned over nettverket, noe som er spesielt gunstig for brukere med begrensede dataplaner eller trege internettforbindelser i områder med mindre utviklet infrastruktur. For eksempel, i mange deler av Afrika og Sør-Amerika, kan datakostnader være en betydelig barriere for internettbrukere. «Offline-first»-design bidrar til å redusere dette problemet.
• Forbedret SEO: Søkemotorer favoriserer nettsteder som er raske og pålitelige, så å bygge en «offline-first»-applikasjon kan forbedre rangeringen din i søkemotorer.

Hvordan service workere fungerer

Livssyklusen til en service worker består av flere stadier:

1. Registrering: Service workeren registreres i nettleseren, og spesifiserer omfanget (scope) av applikasjonen den skal kontrollere.
2. Installasjon: Service workeren installeres, og i løpet av denne prosessen mellomlagrer den vanligvis statiske ressurser.
3. Aktivering: Service workeren aktiveres og tar kontroll over nettapplikasjonen. Dette kan innebære å avregistrere gamle service workere og rydde opp i gamle cacher.
4. Inaktiv: Service workeren forblir inaktiv og venter på nettverksforespørsler eller andre hendelser.
5. Fetch: Når en nettverksforespørsel gjøres, fanger service workeren den opp og kan enten servere mellomlagret innhold eller hente ressursen fra nettverket.

Implementering av «offline-first» med service workere: En trinn-for-trinn-guide

Her er et grunnleggende eksempel på hvordan du implementerer «offline-first»-funksjonalitet ved hjelp av service workere:

Trinn 1: Registrer service workeren

I din hoved-JavaScript-fil (f.eks. `app.js`):

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registrert med scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker-registrering mislyktes:', error);
    });
}

            

              
                Copy
              
            
          

Denne koden sjekker om nettleseren støtter service workere og registrerer filen `service-worker.js`. Omfanget (scope) definerer hvilke URL-er service workeren skal kontrollere.

Trinn 2: Opprett service worker-filen (service-worker.js)

Opprett en fil med navnet `service-worker.js` med følgende kode:

            
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // Utfør installasjonstrinn
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Åpnet cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache-treff - returner respons
        if (response) {
          return response;
        }

        // VIKTIG: Klon forespørselen.
        // En forespørsel er en strøm (stream) og kan bare konsumeres én gang. Siden vi konsumerer denne
        // én gang av cachen og én gang av nettleseren for fetch, må vi klone responsen.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Sjekk om vi mottok en gyldig respons
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // VIKTIG: Klon responsen.
            // En respons er en strøm og må bare konsumeres én gang.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

Denne koden gjør følgende:

• Definerer et `CACHE_NAME` og en liste (`array`) med `urlsToCache`.
• Under `install`-hendelsen åpner den cachen og legger til de spesifiserte URL-ene.
• Under `fetch`-hendelsen fanger den opp nettverksforespørsler. Hvis den forespurte ressursen er i cachen, returnerer den den mellomlagrede versjonen. Ellers henter den ressursen fra nettverket, mellomlagrer den og returnerer responsen.
• Under `activate`-hendelsen fjerner den gamle cacher for å holde cache-størrelsen håndterbar.

Trinn 3: Test din frakoblede funksjonalitet

For å teste din frakoblede funksjonalitet, kan du bruke nettleserens utviklerverktøy. I Chrome, åpne DevTools, gå til "Application"-fanen og velg "Service Workers." Du kan deretter simulere frakoblet modus ved å krysse av for "Offline"-boksen.

Avanserte service worker-teknikker

Når du har en grunnleggende forståelse av service workere, kan du utforske mer avanserte teknikker for å forbedre din «offline-first»-applikasjon:

Mellomlagringsstrategier (Caching Strategies)

Det finnes flere mellomlagringsstrategier du kan bruke, avhengig av ressurstypen og applikasjonens krav:

• Cache First: Server alltid innhold fra cachen, og hent kun fra nettverket hvis ressursen ikke finnes i cachen.
• Network First: Prøv alltid å hente innhold fra nettverket først, og bruk cachen kun som en reserveløsning.
• Cache then Network: Server innhold fra cachen umiddelbart, og oppdater deretter cachen med den nyeste versjonen fra nettverket. Dette gir en rask innledende lasting og sikrer at brukeren alltid har det mest oppdaterte innholdet (etter hvert).
• Stale-while-revalidate: Ligner på Cache then Network, men oppdaterer cachen i bakgrunnen uten å blokkere den innledende lastingen.
• Network Only: Tvinger applikasjonen til alltid å hente innhold fra nettverket.
• Cache Only: Tvinger applikasjonen til kun å bruke innhold som er lagret i cachen.

Valg av riktig mellomlagringsstrategi avhenger av den spesifikke ressursen og kravene til applikasjonen din. For eksempel er statiske ressurser som bilder og CSS-filer ofte best tjent med Cache First-strategien, mens dynamisk innhold kan ha nytte av Network First- eller Cache then Network-strategien.

Bakgrunnssynkronisering

Bakgrunnssynkronisering lar deg utsette oppgaver til brukeren har en stabil nettverkstilkobling. Dette er nyttig for oppgaver som å sende inn skjemaer eller laste opp filer. For eksempel kan en bruker i et avsidesliggende område i Indonesia fylle ut et skjema mens han er frakoblet. Service workeren kan da vente til en tilkobling er tilgjengelig før dataene sendes.

Push-varsler

Service workere kan brukes til å sende push-varsler til brukere, selv når applikasjonen ikke er åpen. Dette kan brukes til å re-engasjere brukere og gi rettidige oppdateringer. Se for deg en nyhetsapplikasjon som sender varsler om siste nytt til brukere i sanntid, uavhengig av om appen kjører aktivt.

Workbox

Workbox er en samling JavaScript-biblioteker som gjør det enklere å bygge service workere. Det gir abstraksjoner for vanlige oppgaver som mellomlagring, ruting og bakgrunnssynkronisering. Å bruke Workbox kan forenkle din service worker-kode og gjøre den mer vedlikeholdbar. Mange selskaper bruker nå Workbox som en standardkomponent når de utvikler PWA-er og «offline-first»-opplevelser.

Hensyn for et globalt publikum

Når du bygger «offline-first»-nettapplikasjoner for et globalt publikum, er det viktig å ta hensyn til følgende faktorer:

• Varierende nettverksforhold: Nettverkstilkoblingen kan variere betydelig på tvers av ulike regioner. Noen brukere kan ha tilgang til høyhastighetsinternett, mens andre kan være avhengige av trege eller ustabile forbindelser. Design applikasjonen din slik at den håndterer ulike nettverksforhold på en elegant måte.
• Datakostnader: Datakostnader kan være en betydelig barriere for internettbrukere i enkelte deler av verden. Minimer dataforbruket ved å mellomlagre ressurser aggressivt og optimalisere bilder.
• Språkstøtte: Sørg for at applikasjonen din støtter flere språk, og at brukere kan få tilgang til innhold på sitt foretrukne språk, selv når de er frakoblet. Lagre lokalisert innhold i cachen og server det basert på brukerens språkinnstillinger.
• Tilgjengelighet: Sørg for at nettapplikasjonen din er tilgjengelig for brukere med nedsatt funksjonsevne, uavhengig av nettverkstilkoblingen deres. Følg beste praksis for tilgjengelighet og test applikasjonen med hjelpemiddelteknologi.
• Innholdsoppdateringer: Planlegg hvordan du skal håndtere innholdsoppdateringer effektivt. Strategier som `stale-while-revalidate` kan gi brukerne en rask innledende opplevelse samtidig som de sikrer at de til slutt ser det nyeste innholdet. Vurder å bruke versjonering for mellomlagrede ressurser slik at oppdateringer rulles ut smidig.
• Begrensninger i lokal lagring (Local Storage): Mens lokal lagring er nyttig for små datamengder, har service workere tilgang til Cache API, som tillater lagring av større filer og mer komplekse datastrukturer, noe som er avgjørende for frakoblede opplevelser.

Eksempler på «offline-first»-applikasjoner

Flere populære nettapplikasjoner har vellykket implementert «offline-first»-funksjonalitet ved hjelp av service workere:

• Google Maps: Lar brukere laste ned kart for frakoblet bruk, slik at de kan navigere selv uten internettforbindelse.
• Google Docs: Lar brukere opprette og redigere dokumenter frakoblet, og synkroniserer endringer når en nettverkstilkobling er tilgjengelig.
• Starbucks: Gjør det mulig for brukere å bla i menyen, legge inn bestillinger og administrere bonuskontoen sin frakoblet.
• AliExpress: Lar brukere bla gjennom produkter, legge varer i handlekurven og se ordredetaljer frakoblet.
• Wikipedia: Tilbyr frakoblet tilgang til artikler og innhold, og gjør kunnskap tilgjengelig selv uten internett.

Konklusjon

Service workere er et kraftig verktøy for å bygge «offline-first»-nettapplikasjoner som er raske, pålitelige og engasjerende. Ved å mellomlagre ressurser, fange opp nettverksforespørsler og håndtere bakgrunnsoppgaver, kan service workere gi en overlegen brukeropplevelse, selv når nettverkstilkoblingen er begrenset eller fraværende. Ettersom nettverkstilgangen forblir ustabil over hele kloden, er det avgjørende å fokusere på «offline-first»-design for å sikre lik tilgang til informasjon og tjenester på nettet.

Ved å følge trinnene som er beskrevet i denne guiden og vurdere faktorene nevnt ovenfor, kan du lage nettapplikasjoner som fungerer sømløst frakoblet og gir en herlig opplevelse for brukere over hele verden. Omfavn kraften til service workere og bygg fremtidens nett – en fremtid der nettet er tilgjengelig for alle, overalt, uavhengig av nettverkstilkoblingen deres.